<script>
export default {
	data(){
		return{
			pageId: null,
			searchTxt: '',
			img1: '../../static/newImg/search.png',
			img2: '../../static/newImg/right.png',
			img3: '../../static/newImg/homeBack.png',
			unitList: [],
			searchList: []
		}
	},
	onLoad(obj) {
		this.pageId = obj.pageId;
		if( obj.pageId == 1 ){
			uni.setNavigationBarTitle({
				title: '预约取号'
			});
		}else{
			uni.setNavigationBarTitle({
				title: '实时取号'
			});
		}
		this.getUnitList();
	},
	methods: {
		getUnitList(){
			this.$http.get("zhdt/queue-list",{centerId: '123'}).then(res=>{
				this.unitList = res.data.data || [];
			})
		},
		goDetail(item){
			this.navTo("/pages/home/reserveDetail",{detailId: item.queueNumber,pageId: this.pageId, detailName: item.queueName})
		},
		searchVal(e){
			let {value} = e.detail;
			this.searchList = [];
			if(value.length == 0){
				this.searchList = [];
				return;
			}
			this.searchList = this.unitList.filter(i=>{
				if(i.queueName.indexOf(value) == -1){
					return false
				}else{
					return i
				}
			})
		},
		backHome(){
			uni.navigateBack({ delta: 1 });
		}
	}
}
</script>

<template>
	<view class="page-index">
		<view class="search-input">
			<!-- <view class="back-home" @click="backHome()">
				<image :src="img3" mode=""></image>
				<text>首页</text>
			</view> -->
			<view class="input-box">
				<image :src="img1" mode=""></image>
				<input type="text" :value="searchTxt" @input="searchVal" placeholder="请输入查询名称" />
				<text>搜索</text>
			</view>
		</view>
		<view class="unit">
			<view class="unit-title">萧山区政务服务中心</view>
			<view class="unit-list">
				<view class="unit-item" @click="goDetail(item)" v-for="(item,index) in (searchList.length == 0 ? unitList : searchList)" :key="index">
					<text>{{item.queueName}}</text>
					<image :src="img2" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.page-index{
	.unit{
		.unit-title{
			font-weight: 600;
			font-size: 32rpx;
			margin: 5px 0 0 10px;
		}
		.unit-list{
			display: flex;
			flex-flow: column;
			padding: 0 40rpx;
			font-size: 32rpx;
			box-sizing: border-box;
			.unit-item{
				display: flex;
				flex-flow: row;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #dcdcdc;
				padding: 15px 0;
				text{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				image{
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
	}
	.search-input{
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 16rpx;
		background-color: #efeff4;
		display: flex;
		flex-direction: row;
		.back-home{
			width: 10%;
			display: flex;
			flex-direction: column;
			padding-left: 4px;
			box-sizing: border-box;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			text{
				font-size: 24rpx;
			}
		}
		.input-box{
			border-radius: 999rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			flex-flow: row;
			align-items: center;
			height: 80rpx;
			background-color: #fff;
			image{
				width: 26rpx;
				height: 26rpx;
				margin: 0 20rpx;
			}
			input{
				width: calc(100% - 80rpx - 4em);
			}
			text{
				background-color: #4087ef;
				color: #fff;
				display: inline-block;
				width: 4em;
				text-align: center;
				font-size: 28rpx;
				box-sizing: border-box;
				line-height: 40rpx;
				border-radius: 9999rpx;
				padding: 8rpx 20rpx;
				margin-right: 20rpx;
			}
		}
	}
}
</style>

